<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui" />
	<title> JS + CSS Calculator</title>

	<link rel="stylesheet" href="css/style.css">

</head>
<body>

<div class="calculator">
	<div class="calculator__top">
		<h1>Calcul</h1>
		<input type="text" class="calculator__top--display" value="" disabled="">
	</div>
	<div class="calculator__middle">
		<div class="calculator__middle--top"></div>
		<div class="calculator__middle--junction"></div>
		<div class="calculator__middle--bottom"></div>
	</div>
	<div class="calculator__bottom">
		<button type="button" class="calculator__bottom--item"><div class="cursor"></div></button>
		<button type="button" class="calculator__bottom--item"><div class="cursor"></div></button>
		<button type="button" class="calculator__bottom--item item-grey-small" data-action="punchline" value="this">THIS</button>
		<button type="button" class="calculator__bottom--item item-grey-small" data-action="punchline" value="is">IS</button>
		<button type="button" class="calculator__bottom--item item-grey-small" data-action="punchline" value="like">LIKE</button>
		<button type="button" class="calculator__bottom--item item-grey-big" data-action="arrow" value=";-)">→</button>
		<button type="button" class="calculator__bottom--item item-grey-small" data-action="punchline" value="an">AN</button>
		<button type="button" class="calculator__bottom--item item-grey-small" data-action="punchline" value="old">OLD</button>
		<button type="button" class="calculator__bottom--item item-grey-small" data-action="punchline" value="calc">CALC</button>
		<button type="button" class="calculator__bottom--item item-grey-small" data-action="punchline" value="ula">ULA</button>
		<button type="button" class="calculator__bottom--item item-grey-small" data-action="punchline" value="tor">TOR</button>
		<button type="button" class="calculator__bottom--item item-grey-big" data-action="squareRoot" value="">√</button>
		<button type="button" class="calculator__bottom--item item-black" value="7">7</button>
		<button type="button" class="calculator__bottom--item item-black" value="8">8</button>
		<button type="button" class="calculator__bottom--item item-black" value="9">9</button>
		<button type="button" class="calculator__bottom--item item-blue" data-action="smile" value="b">B</button>
		<button type="button" class="calculator__bottom--item item-blue" data-action="smile" value="f">F</button>
		<button type="button" class="calculator__bottom--item item-grey-big" data-action="smile" value="?">?</button>
		<button type="button" class="calculator__bottom--item item-black" value="4">4</button>
		<button type="button" class="calculator__bottom--item item-black" value="5">5</button>
		<button type="button" class="calculator__bottom--item item-black" value="6">6</button>
		<button type="button" class="calculator__bottom--item item-grey-big" data-action="operator" value="*">×</button>
		<button type="button" class="calculator__bottom--item item-grey-big" data-action="operator" value="/">/</button>
		<button type="button" class="calculator__bottom--item item-grey-big" data-action="color" value="color">☀︎</button>
		<button type="button" class="calculator__bottom--item item-black" value="1">1</button>
		<button type="button" class="calculator__bottom--item item-black" value="2">2</button>
		<button type="button" class="calculator__bottom--item item-black" value="3">3</button>
		<button type="button" class="calculator__bottom--item item-grey-big" data-action="operator" value="+">+</button>
		<button type="button" class="calculator__bottom--item item-grey-big" data-action="operator" value="-">-</button>
		<button type="button" class="calculator__bottom--item item-red" data-action="clear" value="0">AC</button>
		<button type="button" class="calculator__bottom--item item-black" value="0">0</button>
		<button type="button" class="calculator__bottom--item item-black" value="0">00</button>
		<button type="button" class="calculator__bottom--item item-black" data-action="decimal" value=".">.</button>
		<button type="button" class="calculator__bottom--item item-grey-big" data-action="operator" value="=">=</button>
	</div>
</div>

<script src="js/script.js"></script>

</body>
</html>
